Ajax ব্যবহার করে RESTful API কল করা একটি সাধারণ এবং কার্যকর পদ্ধতি, যা ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা রিকোয়েস্ট এবং রেসপন্স পরিচালনা করতে সাহায্য করে। Ajax এর মাধ্যমে আপনি RESTful API এর বিভিন্ন মেথড (GET, POST, PUT, DELETE) ব্যবহার করে ডেটা ফেচ, অ্যাড, আপডেট, এবং ডিলিট করতে পারেন।
এই উদাহরণে, আমরা একটি Employee Management API ব্যবহার করবো, যেখানে RESTful API এর মাধ্যমে বিভিন্ন অপারেশন করা হবে (GET, POST, PUT, DELETE)।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax RESTful API Example</title>
</head>
<body>
<h1>Employee Management</h1>
<button onclick="getEmployees()">Get All Employees</button>
<button onclick="addEmployee()">Add New Employee</button>
<button onclick="updateEmployee()">Update Employee</button>
<button onclick="deleteEmployee()">Delete Employee</button>
<div id="response-container" style="margin-top: 20px;">
<!-- API রেসপন্স এখানে দেখানো হবে -->
</div>
<script>
// সমস্ত এমপ্লয়ির তালিকা ফেচ করা (GET)
function getEmployees() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/employees", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayResponse(response);
}
};
xhr.send();
}
// নতুন এমপ্লয়ি অ্যাড করা (POST)
function addEmployee() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/employees", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 201) {
var response = JSON.parse(xhr.responseText);
displayResponse(response);
}
};
var newEmployee = {
name: "Jane Doe",
email: "jane@example.com",
department: "Sales"
};
xhr.send(JSON.stringify(newEmployee));
}
// এমপ্লয়ি আপডেট করা (PUT)
function updateEmployee() {
var xhr = new XMLHttpRequest();
xhr.open("PUT", "https://example.com/api/employees/123", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayResponse(response);
}
};
var updatedEmployee = {
name: "Jane Smith",
email: "jane.smith@example.com",
department: "Marketing"
};
xhr.send(JSON.stringify(updatedEmployee));
}
// এমপ্লয়ি ডিলিট করা (DELETE)
function deleteEmployee() {
var xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://example.com/api/employees/123", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
displayResponse({ message: "Employee deleted successfully" });
}
};
xhr.send();
}
// API রেসপন্স দেখানোর জন্য ফাংশন
function displayResponse(response) {
var container = document.getElementById("response-container");
container.innerHTML = JSON.stringify(response, null, 2);
}
</script>
</body>
</html>
১. GET রিকোয়েস্ট (getEmployees):
GET মেথড ব্যবহার করে সমস্ত এমপ্লয়ির ডেটা ফেচ করে।xhr.onreadystatechange ব্যবহার করে রিকোয়েস্টের রেসপন্স চেক করা হয়। যদি রিকোয়েস্ট সফল হয় (HTTP স্ট্যাটাস 200), তাহলে JSON ডেটা প্রসেস করা হয় এবং displayResponse ফাংশনকে কল করে তা HTML এ দেখানো হয়।২. POST রিকোয়েস্ট (addEmployee):
POST মেথড ব্যবহার করে সার্ভারে পাঠানো হয়।xhr.send() এর মাধ্যমে পাঠানো হয় এবং রেসপন্স 201 (Created) হলে তা UI তে দেখানো হয়।৩. PUT রিকোয়েস্ট (updateEmployee):
PUT মেথড ব্যবহার করে একটি নির্দিষ্ট এমপ্লয়ির তথ্য আপডেট করা হয়। এখানে এমপ্লয়ির ID 123 ধরা হয়েছে।200), তাহলে রেসপন্সটি UI তে দেখানো হয়।৪. DELETE রিকোয়েস্ট (deleteEmployee):
DELETE মেথড ব্যবহার করে নির্দিষ্ট ID এর এমপ্লয়ি ডিলিট করা হয়।200), তাহলে একটি মেসেজ UI তে দেখানো হয় যে এমপ্লয়িটি সফলভাবে ডিলিট হয়েছে।৫. displayResponse ফাংশন:
response-container এ দেখানো হয়, যা ব্যবহারকারীর জন্য ডাইনামিক ফিডব্যাক দেয়।১. Asynchronous Operation:
২. HTTP Methods:
৩. JSON Integration:
৪. Scalability and Flexibility:
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
